<template>
  <div>
    <!-- 新增电影表单 : 10个表单项 -->
    <el-form   :rules="rules"  ref="form" label-width="80px" 
    style="width: 500px"  :inline="true"   :model="form"
      class="demo-form-inline"
    >
      <el-form-item label="封面图" prop="cover">
        <el-upload
          class="avatar-uploader" :on-success="uploadSuccess"
          action="http://localhost:9000/upload"
          :show-file-list="false" >
          <img v-if="form.cover" :src="form.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="电影类别" prop="categoryId">
        <el-radio v-model="form.categoryId" label="1">热映</el-radio>
        <el-radio v-model="form.categoryId" label="2">待映</el-radio>
        <el-radio v-model="form.categoryId" label="3">经典</el-radio>
      </el-form-item>

      <el-form-item label="电影名称" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>

      <el-form-item label="电影类型" prop="type">
        <el-select v-model="form.type" multiple placeholder="请选择">
          <el-option v-for="item in movieTypes" :key="item.id" 
          :label="item.typename" :value="item.typename"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="电影主演" prop="starActor">
        <el-select v-model="form.starActor" multiple remote filterable 
        :remote-method="queryActors"  placeholder="请选择">
          <el-option v-for="item in actors" :key="item.id" 
          :label="item.actor_name" 
          :value="item.actor_name"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="上映时间" prop="showingon">
        <el-date-picker v-model="form.showingon" value-format="yyyy-MM-dd"
        type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="电影评分" prop="score">
        <el-input v-model="form.score"></el-input>
      </el-form-item><br>
      <el-form-item label="电影时长" prop="duration">
        <el-input v-model="form.duration"></el-input>
      </el-form-item><br>
      <el-form-item label="电影简介" prop="description">
        <el-input v-model="form.description"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">新增</el-button>
        <el-button type="primary">取消</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        categoryId: "1",
        cover: "",
        title: "",
        type: "",
        starActor: "",
        showingon: "",
        score: "",
        description: "",
        duration: "",
      },
      // 表单验证规则
      rules: {
        categoryId:[{required:true,message:'必填',trigger:'blur'}],
        cover:[{required:true,message:'必填',trigger:'blur'}],
        title:[{required:true,message:'必填',trigger:'blur'}],
        type:[{required:true,message:'必填',trigger:'blur'}],
        starActor:[{required:true,message:'必填',trigger:'blur'}],
        showingon:[{required:true,message:'必填',trigger:'blur'}],
        score:[{required:true,message:'必填',trigger:'blur'}],
        description:[{required:true,message:'必填',trigger:'blur'}],
        duration:[{required:true,message:'必填',trigger:'blur'}]
      },
      // 电影类型
      movieTypes:[],
      // 主演选择
      actors:[],
    };
  },
  mounted(){
    this.$http.movieApi.queryMovieTypes().then(res=>{
      console.log('加载电影类型',res);
      this.movieTypes=res.data.data
    })
  },
  methods: {
    // 上传图片
    uploadSuccess(res,file) {
      console.log(res);
      this.form.cover=res.data
    },
    // 选择主演列表项中 输入框的关键字
    queryActors(word){
      console.log('关键字',word);
      this.$http.actorApi.queryByNameLike({name:word}).then(res=>{
        console.log('演员列表查询结果',res);
        this.actors=res.data.data
      })
    },
    // 提交表单做验证
    submit(){
      console.log('表单',this.form);
      this.$refs['form'].validate(valid=>{
        if(valid){
          // 整理提交参数的格式
          this.form.type=this.form.type.join('/')
          this.form.starActor=this.form.starActor.join('/')
          console.log('验证结果',this.form);
          this.$http.movieApi.add(this.form).then(res=>{
            console.log(res);
            if(res.data.code==200){
              this.$message({type:'success',message:'新增电影成功'})
              this.$router.go(-1)  //回到上一页
              // this.$router.push('/home/movie-list')
            }
          })
        }
        
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
</style>